<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  <head>
    <!-- meta -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta property="qc:admins" content="23635710066417756375" />
    <meta name="baidu-site-verification" content="QIQ6KC1oZ6" />
    <meta charset="UTF-8" />

    <meta
      content="登录"
      name="keywords"
    />

    <meta
      content="登录"
      name="description"
    />
    <meta name="viewport" content="width=device-width" />

    <title>登录</title>

    <link rel="stylesheet" type="text/css" href="css/dmaku2.css" />
  </head>

  <body>
    <header id="header">
      <a href="javascript:;" class="logo"></a>
      <i class="icons">beta</i>
    </header>
    <!-- /header -->

    <!-- 页面主体START -->
    <section id="main">
      <h1>登录</h1>
      <form action="/login" method="post">

        <span th:if="${param.error}" th:text="${param.msg}">登录失败</span>
        <div class="clearfix">
          <input
            type="text"
            placeholder="输入帐号"
            id="user_name"
            name="username"
            autocomplete="off"
          />
        </div>

        <div class="clearfix">
          <input
            type="password"
            name="password"
            id="user_password"
            placeholder="输入密码"
            autocomplete="off"
          />
        </div>

        <div class="verifyCodeInput clearfix">
          <div class="code_cont">
            <input
              type="text"
              name="code"
              placeholder="请证明你不是机器人"
              autocomplete="off"
            />
            <img
              src=""
              id="codeImg"
              alt="验证码"
              class="yzm"
              onclick="getCaptchaImage()"
            />
          </div>
        </div>

        <div class="clearfix">
          <a href="javascript:;" class="forgot_pwd">忘记密码？</a>
        </div>

        <div class="clearfix btn_login">
          <input type="submit" value="登录"  />
        </div>

        <div class="clearfix goregister">
          <span class="reg_now">没有帐号？</span>
          <a href="javascript:;">注册</a>
        </div>

        <input type="hidden" name="uuid"  />
      </form>
    </section>
    <!-- 页面主体END -->

    <footer id="footer">
      <div>客服热线：XXX <span>（周一至周五10:00-19:00）</span></div>
      <p>Copyright ? 2020</p>
    </footer>
    <script src="js/axios.min.js"></script>
    <script>
      const userName = document.querySelector("input[name='username']"),
        userPassword = document.querySelector("input[name='password']"),
        verifyCode = document.querySelector("input[name='code']");
      let uuId = "";

	  function submitForm() {
        axios
          .post("/login?username="+userName.value+"&password="+userPassword.value+"&rememberMe=false&code="+verifyCode.value+"&uuid="+uuId)
          .then((res) => {
			console.log(res)
		  })
          .catch((err) => {
            console.log(err)
          });
		 return false; 
      }

      function getCaptchaImage() {
        axios
          .get("/captchaImage")
          .then((res) => {
            document.getElementById("codeImg").src =
              "data:image/gif;base64," + res.data.img;
            uuId = res.data.uuid;
            document.querySelector("input[name='uuid']").value=res.data.uuid;
          })
          .catch((err) => {});
      }
      getCaptchaImage();
    </script>
  </body>
</html>
